<template>
    <view class="movie-box">
        <view>
            <view style="font-size: 26rpx;color: #666666">IMEI：{{ bodyData.imei }}</view>
        </view>
        <view style="height: 10rpx"></view>
        <u-row>
            <u-col :span="3.5">
                <image 
                v-if="bodyData.fileIdOfImage"
                :src="$kt.file.visit(bodyData.fileIdOfImage)" mode="aspectFill" class="movie-box-img"></image>
            
                <image 
                v-else
                :src="$kt.file.byPath('image/defaultShow.png')" mode="aspectFill" class="movie-box-img"></image>
            </u-col>
            <u-col :span="8">
                <view style="padding: 10rpx;vertical-align: top;padding: 0 0 0 20rpx;box-sizing: border-box">
                    <view style="font-size: 32rpx;color: #000000;">
                        {{ bodyData.name }}
                        <view style="width: 150rpx;float: right;">
                            <u-tag 
                            v-if="bodyData.statusCode == 'good'"
                            size="mini" text="状态：良好" type="success" />
                            <u-tag
                            v-else-if="bodyData.statusCode == 'bad'"
                            size="mini" text="状态：故障" type="error" />
                            <u-tag 
                            v-else
                            size="mini" text="状态：未知" type="warning" />
                        </view>
                    </view>
                    <view style="height: 5rpx"></view>
                    <view style="color: #666666;font-size: 26rpx">
                        <view>使用时间：{{ timeOfUse }}</view>
                        <view style="height: 10rpx"></view>
                        <view>合闸状态：{{ bodyData.status.outputStatusIndication == 0 ? '未合闸' : '已合闸' }}</view>
                        <view style="height: 10rpx"></view>
                        <view style="border-top: 1rpx solid #999;padding: 10rpx 0 10rpx 0;">
                            <u-row>
                                <u-col :span="6">
                                    <view>
                                        电压01:
                                        <view style="color: green">
                                            {{ bodyData.status.voltage01 }}V
                                        </view>
                                    </view>
                                </u-col>
                                <u-col :span="6">
                                    <view>
                                        电压02:
                                        <view style="color: green">
                                            {{ bodyData.status.voltage02 }}V
                                        </view>
                                    </view>
                                </u-col>

                            </u-row>

                            <u-row>
                                <u-col :span="6">
                                    <view>
                                        频率01:
                                        <view style="color: green">
                                            {{ bodyData.status.frequency01 }}Hz
                                        </view>
                                    </view>
                                </u-col>
                                <u-col :span="6">
                                    <view>
                                        电流01:
                                        <view style="color: green">
                                            {{ electricCurrent(bodyData.status.electricCurrent01) }}A
                                        </view>
                                    </view>
                                </u-col>
                            </u-row>
                        </view>

                        <view style="height: 10rpx"></view>
                    </view>
                </view>
            </u-col>

        </u-row>
        <view style="height: 10rpx"></view>
        <view @click="openMap()">
            <u-row>
                <u-col :span="1">
                    <u-icon name="map-fill" size="40rpx"></u-icon>
                </u-col>
                <u-col :span="11">
                    <view style="font-size: 26rpx;color: #666666">{{ bodyData.address }}{{ "-" }}{{ bodyData.detailAddress }}</view>
                </u-col>
            </u-row>
        </view>
    </view>
</template>

<script>

export default {
    props: {
        item: {
            type: Object,
            default: () => {
                return {
                    "statusCode": "good",
                    "address": null,
                    "detailAddress": null,
                    "fileIdOfImage": null,
                    "gmtCreate": 1702457490807,
                    "gmtModified": 1702457490807,
                    "id": 492835181862917,
                    "imei": "",
                    "isInit": false,
                    "latitude": null,
                    "longitude": null,
                    "name": null,
                    "org": { "name": "1号公司3" },
                    "orgId": 1,
                    "remark": null,
                    "status": {
                        "closingOperationCount": 20,
                        "closingOperationFaultRecoveryTime": 0,
                        "closingOperationRemainingTime": 0,
                        "electricCurrent01": 0.0000600329,
                        "electricCurrent02": 0.00527798,
                        "electricCurrent03": 203.431,
                        "electricCurrent04": 192.568,
                        "frequency01": 5002,
                        "frequency02": 682,
                        "gmtCreate": null,
                        "gmtModified": 1702457805470,
                        "id": 492835179008005,
                        "imei": "863482060483969",
                        "leakageCurrentCount": 29,
                        "leakageCurrentTimeLimit": 0,
                        "leakageCurrentValue": 30,
                        "leakageStatus": 0,
                        "lightningStrikeCount": 8696,
                        "lightningStrikeSingleTimeShieldTime": 0,
                        "lightningStrikeVoltageSetting": 1000,
                        "lowVoltageCount": 264,
                        "lowVoltageTimeLimit": 0,
                        "lowVoltageValue": 0,
                        "numberOfreclosingActions": 0,
                        // 0 未合闸 1 已合闸
                        "outputStatusIndication": 1,
                        "overVoltageClosingVoltage": 600,
                        "overVoltageCount": 25,
                        "overVoltageStatus": 0,
                        "overVoltageTimeLimit": 0,
                        "overVoltageValue": 600,
                        "overcurrentSettingClosingCount": 20,
                        "overloadActionClosingCountdown": 0,
                        "overloadClosingCountResetTime": 0,
                        "overloadClosingOperationCount": 0,
                        "overloadCount": 16,
                        "overloadProtection": 10,
                        "overloadStatus": 0,
                        "overloadTimeLimit": 0,
                        "saveCount": 0,
                        "shortCircuitCount": 8,
                        "shortCircuitStatus": 0,
                        "totalReturn": 0,
                        "underVoltageClosingVoltage": 0,
                        "underVoltageStatus": 0,
                        // 电压01
                        "voltage01": 224.52,
                        // 电压02
                        "voltage02": 1819.01
                    },
                    "userIdOfInstall": null,
                    "userOfInstall": {
                        "realName": "张三",
                        "phone": "13000000000",
                    }
                };
            }
        }
    },
    data() {
        return {
            // 使用时长
            timeOfUse: "",
            bodyData:{

            }
        }
    },
    created() {
        this.bodyData = JSON.parse(JSON.stringify(this.item));
        console.log("imei",this.bodyData.imei);

        uni.$on("busDtuStatusUpdate:"+this.bodyData.imei,(data)=>{
            console.log(this.bodyData.imei,"发生了改变");
            this.bodyData.status = data;
        });


        this.timeOfUse = this.$kt.util.readableTime(this.item.gmtCreate);
        setInterval(() => {
            this.timeOfUse = this.$kt.util.readableTime(this.item.gmtCreate);
        }, 60000);
    },
    methods: {
        // 电流转换
        electricCurrent(electricCurrent) {
            let result = electricCurrent.toExponential();
            // 取e后面的字符，包含e
            let index = result.indexOf("e");
            let afterE = result.substring(index);
            // 取e前面的字符，不包含e
            let beforeE = result.substring(0, index - 1);
            // beforeE保存小数点后2位
            beforeE = beforeE.substring(0, 4);
            result = beforeE + afterE;
            return result;
        },
        openMap() {
            uni.openLocation({
                latitude: this.item.latitude,
                longitude: this.item.longitude,
                scale: 18,
                name: this.item.name,
                address: this.item.address + this.item.detailAddress,
                success: (res) => {
                    console.log(res);
                },
                fail: (err) => {
                    console.log(err);
                }
            });
        },
        }
}
</script>


<style lang="scss" scoped>
.movie-box {
    background-color: #fff;
    padding: 20rpx;
    margin: 0 0 30rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    border-radius: 20rpx;

    .movie-box-img {
        width: 100%;
        height: 280rpx;
        border-radius: 20rpx;
        vertical-align: top;
    }

    .btn {
        background-color: #f0f0f0;
        box-sizing: border-box;
        color: #333333;
        text-align: center;
        padding: 10rpx 0 10rpx 0;
        font-size: 20rpx;
    }

    .btn1 {
        border-radius: 10rpx 0 0 10rpx;
        background-color: rgba(255, 0, 0, 0.2);
        color: rgba(255, 0, 0, 1);
    }

    .btn2 {
        border-radius: 0 10rpx 10rpx 0;
        background-color: rgba(255, 0, 0, 1);
        color: #fff;
    }

    .btn:active {
        opacity: .8;
    }
}
</style>